<template>
	<view class="login-main">
		<view class="navigation-wrap">
			<view class="status_bar"></view>
			<view class="navigation-bar flex-center" @click="goBackAction">
				<text class="iconfont">&#xe605;</text>
			</view>
		</view>
		<view class="content">
			<view class="title">欢迎回来！</view>
			<view class="cell b-b">
				<text class="label">+86</text>
				<input class="uni-input" type="number" placeholder-class="placeholder" placeholder="请输入手机号码" />
			</view>
			<view class="cell b-b">
				<input class="uni-input" type="number"  placeholder-class="placeholder" placeholder="请输入收到的短信验证码" />
				<text class="label code-label">获取验证码</text>
			</view>
			<view class="btn-wrap flex-center" @click="submitAction">
				<text class="btn-text">登录</text>
			</view>
			<view class="other-methods">
				<text class="dividing-line">其他登录方式</text>
				<view class="methods-wrap">
					<view class="methods-column" @click="otherLoginAction('qq')">
						<text class="iconfont qq-icon">&#xea94;</text>
						<view class="text">QQ</view>
					</view>
					<view class="methods-column" @click="otherLoginAction('weixin')">
						<text class="iconfont wx-icon">&#xe73b;</text>
						<view class="text">微信</view>
					</view>
					
				</view>
			</view>
			<view class="agreement">
				<radio class="radio" color="#fa2c19" @click="agreementAction" :checked="agreement" />
				<text>请认真阅读并同意</text>
				<text class="agreement-text">《用户服务协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/static/js/util';
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				agreement: true
			};
		},
		methods: {
			goBackAction() {
				util.goBack()
			},
			agreementAction() {
				this.agreement = !this.agreement
			},
			submitAction() {
				const _this = this
				let userInfo = {
					openId: "oRrdQtyTxZxLFzTYnR_KYQ0Dke9k",
					nickName: "在山的那边海的那边有一只小菜鸡",
					gender: 1,
					city: "厦门",
					province: "福建",
					country: "中国",
					avatarUrl: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9a6b8176-f51f-42c5-88a4-064c0b2d9db8/fd68e63d-5793-4c51-98d2-7be902866f01.jpg",
					unionId: "oU5Yyt_ug_dhf5kh_xZYdIHy4Lr0"
				}
				uni.showLoading({title: '加载中',mask:true});
				setTimeout(()=>{
					_this.setUserInfo(userInfo) 
					util.goBack()
				},500);
				
			},
			otherLoginAction(oauth) {
				const _this = this
				if(process.env.VUE_APP_PLATFORM=='h5') {
					uni.showToast({
						title: 'h5暂不支持此功能',
						icon: 'none'
					})
					return
				}
				uni.login({
				    provider: oauth,
				    success: function (loginRes) {
				        console.log(loginRes.authResult);
				        // 获取用户信息
				        uni.getUserInfo({
				            provider: oauth,
				            success: function (infoRes) {
								_this.setUserInfo(infoRes.userInfo)
								util.goBack()
								
								console.log('用户昵称为：' + JSON.stringify(infoRes.userInfo));
								
								
				            }
				        });
				    }
				});
			},
			...mapMutations(['setUserInfo'])
		}
	}
</script>

<style lang="scss">
	@import "./login.scss";  
</style>
